<template>
  <div class="table-container">
    <Card
      v-for="(item, index) in initialData"
      :key="item.order"
      v-model="item.checked"
      v-bind="cardProps"
      class="card-container"
      :data="item"
      :show-check-box="showCheckBox"
      @checked="(value) => handlerChecked(index, value)"
    />
  </div>
</template>

<script>
import Card from './Card.vue';
import calculated from './calculated';

export default {

  components: {
    Card
  },
  mixins: [calculated],

  props: {
    showCheckBox: {
      type: Boolean,
      default: () => true
    },

    data: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      initialData: this.data
    };
  },

  computed: {
    cardProps() {
      const { showCheckbox } = this;

      return {
        showCheckbox
      };
    }
  },

  watch: {
    data(v) {
      this.initialData = v;
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.settlement();
    });
  }
};
</script>

<style lang="scss" scoped>
.card-container {
  margin-bottom: $margin-xs;
}
</style>
